<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
        <register></register>
        <menu-template></menu-template>
    </div>
    <!-- 菜单组件 -->
    <template id="menuTemplate">
        <div>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
            </ul>
        </div>
    </template>
</body>

</html>
<script type="module">
    import { } from './js/2.7.14_dist_vue.js';

    //定义一个注册组件
    let register = {
        template: `<div><h2>用户注册</h2></div>`
    }

    //定义变量用来保存菜组件
    let menuTemplate = { template: '#menuTemplate' } //使用自定义template标签选择器即可

    new Vue({
        el: "#app",
        data: {
            msg: "hello vue"
        },
        methods: {
            //自定义方法
        },
        computed: {
            //计算属性
        },
        components: {
            //组件
            register,
            menuTemplate,
        },
        created() {

        },
    })
</script>